<template>
	<view>
		<page-head :pageTitle="coupon.comp_name" :backToggle="true"></page-head>
		<view class="container">
			<view class="conpon_detail">
				<coupon :coupon="coupon"></coupon>
			</view>
			<view class="act_list">
				<view class="item box box-align-center" @tap="handleBrandToggle">
					<view class="hd">使用规则</view>
					<view :class="['fd', brand_toggle ? 'active':'']"></view>
				</view>
				<view class='remark' v-if="brand_toggle">
					<rich-text :nodes="coupon.act_rule"></rich-text>
				</view>
			</view>

			<view class="footerHL"></view>
			<view class="footer">
				<view @tap="handlesub" class="footlist box box-align-center box-pack-center">
					<button class="kfbt sub_btn" v-if="coupon.plantype=='D'">
						支付{{useramount}}元
					</button>
					<button class="kfbt sub_btn" wx:else>确认兑换</button>
				</view>
			</view>
			<alert :msg="cityMsg" ref="cityAlert"></alert>
			<alert 	:msg="exchangeDesc" 
							:showBtn="true" 
							:cancelText="cancelText" 
							:confirmText="confirmText" 
							:loading='loading' 
							ref="exchangeAlert" 
							@handleExchange="handleExchange">
			</alert>

		</view>
	</view>
</template>

<script>
	import couponModel from "../../model/coupon"
	import bus from '../../common/bus'

	import coupon from "../../components/coupon/coupon"
	import alert from "../../components/iframe/alert"
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				pageTitle: '品牌名称',
				coupon: {},
				brand_toggle: true,
				// 城市未定位弹窗
				cityToggle: false,
				cityMsg: '',
				// 兑换界面配置
				exchangeToggle: false,
				exchangeDesc: "由于商家券码只能使用一次，您确认兑换后，不能再退还。非常感谢您的理解与支持！",
				cancelText: '返回',
				confirmText: '确认兑换',
				// 兑换防止连续多次点击
				loading: false,
			}
		},
		components: {
			coupon,
			alert
		},
		created() {
			// bus.$on('closeAlert', msg => {
			// 	this.cityToggle = msg;
			// 	this.exchangeToggle = msg;
			// })
		},
		computed: {
			...mapState({
				userinfo: state => state.info.userinfo
			})
		},
		onLoad(options) {
			this._option = options
		},
		onShow() {
			this.getDetail()

		},
		methods: {
			getDetail() {
				this.$api.wxApi.getActDetail({
					act_id: this._option.actid
				}).then(res => {
					console.log(couponModel.Detail.parse(res.data))
					this.coupon = couponModel.Detail.parse(res.data)
				})
			},
			handleBrandToggle() {
				this.brand_toggle = !this.brand_toggle
			},
			handlesub() {
				let zdy = {
					act_id: this._option.actid,
					city: wx.getStorageSync('usercity')
				}
				this.$api.wxApi.checkPositionBeforeExc(zdy).then(res => {
					// wx.aldstat.sendEvent('点击兑换按钮')
					if (res.code !== 200) {
						this.cityMsg = res.msg
						this.cityToggle = true
						return false
					}
					this.$refs.exchangeAlert.showAlert()
				})
			},
			onExchangeHide() {
				this.$refs.exchangeAlert.hideAlert()
			},

			// 确认兑换
			handleExchange(e) {
				let that = this
				if (this.loading) return false;
				this.loading = true
				let formId = e.detail.formId;
				let area = this._option.plantype == 'D' ? '现金专区' : 'V豆专区'
				// wx.aldstat.sendEvent('确认兑换', {
				// 	'券名称': that.data.coupon.act_name,
				// 	'券专区': area
				// })
				let zdy = {
					act_id: this._option.actid,
					form_id: formId,
					province: uni.getStorageSync('province'),
					city: uni.getStorageSync('usercity')
				}
				switch (this._option.plantype) {
					// 为V豆专区的券时
					case 'P':
						if (this.userinfo.user_assets.v_point < this.coupon.price) {
							this.$tips.alertToast('V豆不足')
							return false;
						}
						wx.showLoading({
							title: '兑换中...',
						})
						zdy.data = JSON.stringify({
							'amount': 0,
							'dou': this.coupon.price
						});
						this.$api.wxApi.exchange(zdy).then(res => {
							wx.hideLoading();
							if (res.code !== 200) {
								this.loading = false
							} else {
								this.getpay(res.data.billno, res.data.pay_billno);
							}
						})
						break;
						// 现金支付
					case 'D':
						wx.showLoading({
							title: '兑换中...',
						})
						zdy.point = this.coupon.price;
						zdy.city = wx.getStorageSync('usercity');
						let biArr = [];
						// that.data.pointList.forEach(item => {
						// 	if (item.biNum > 0) {
						// 		biArr.push({
						// 			comp_id: item.comp_id,
						// 			point: item.biNum * item.rate
						// 		})
						// 	}
						// });
						zdy.data = JSON.stringify({
							'amount': that.data.useramount,
							'dou': 0,
							// 'point': biArr
						});
						this.$api.wxApi.exchange(zdy).then(res => {
							wx.hideLoading();
							if (res.code !== 200) {
								this.$tips.alertMsg(res.msg)
							} else {
								this.getpay(res.data.billno, res.data.pay_billno);
							}
						})
						break;
					default:
						break;
				}
			},
			getpay(billno, pay_billno) {
				uni.showLoading({
					title: '兑换中...',
				})
				let zdy = {
					billno: billno || '',
					pay_billno: pay_billno || ''
				}
				let that = this;
				this.$api.wxApi.pay(zdy).then(json => {
					uni.hideLoading();
					if (json.code !== 200) {
						this.$tips.alertMsg(json.msg, {
							cb: function() {
								this.loading = false
							}
						})
						return false;
					}
					// 需要支付的状态
					if (json.data.need_pay == 'Y') {
						let wxPayPara = JSON.parse(json.data.wxPayPara);
						uni.requestPayment({
							'timeStamp': wxPayPara.timeStamp,
							'nonceStr': wxPayPara.nonceStr,
							'package': wxPayPara.package,
							'signType': 'MD5',
							'paySign': wxPayPara.paySign,
							'success': function(res) {
								// app.alertMsg('付款成功')
								// wx.aldstat.sendEvent('付款成功')
								uni.showToast({
									title: '兑换成功',
									icon: 'success',
									duration: 500
								})
								// app.getinfo(json => {
								// 	that.setData({
								// 		mycoin: json.dou,
								// 		loading: false
								// 	})
								// })
								app.http.mypost('ExchangeCoupon/getCouponIdByBillno', {
									billno: billno
								}, function(json) {
									if (json.code !== 200) return false;
									setTimeout(() => {
										wx.reLaunch({
											url: '/pages/coupon/couponDetail?actid=' + that._option.actid + '&couponid=' + json.data.coupon_id
										})
									}, 1500)
								})
							},
							fail: function(res) {
								this.loading = false
							}
						})
					} else {
						uni.showToast({
							title: '兑换成功',
							icon: 'success',
							duration: 500
						})
						this.loading = false
						uni.reLaunch({
							url: '/pages/coupon/couponDetail?actid=' + that._option.actid + '&couponid=' + json.data.coupon_id
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.conpon_detail {
		padding: 30rpx 30rpx;
		background: #f7f7f7;
	}
	.act_list {
		padding: 0rpx 20rpx;
		background: #fff;
		padding-top: 17rpx;
	}

	.act_list .item {
		height: 42rpx;
		padding: 17rpx 0;
	}

	.act_list .item .hd {
		flex: 1;
		font-size: 30rpx;
		color: #565656;
	}

	.act_list .item .fd {
		font-size: 32rpx;
		color: #565656;
		padding-right: 18rpx;
		position: relative;
		padding-top: 36rpx;
	}

	.act_list .item .fd:after {
		content: " ";
		display: inline-block;
		height: 18rpx;
		width: 18rpx;
		border-width: 3rpx 3rpx 0 0;
		border-color: #979797;
		border-style: solid;
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		position: absolute;
		top: 50%;
		margin-top: -12rpx;
		right: 10rpx;
		transition: all 0.5s;
	}

	.act_list .item .fd.active:after {
		transition: all 0.5s;
		transform: rotate(135deg);
	}

	.act_list .remark {
		padding: 0 0rpx 20rpx 0rpx;
	}

	.act_list .remark {
		font-size: 26rpx;
		color: #999;
		line-height: 36rpx;
		margin-top: 30rpx;
	}

	.footerHL {
		font-size: 0;
		overflow: hidden;
		height: 140rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 140rpx;
		z-index: 88;
	}

	.footer .footlist {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.footer .footlist .sub_btn {
		width: 660rpx;
		height: 100rpx;
		border-radius: 8rpx;
		color: #fff;
		background: #1bdd29;
		text-align: center;
		line-height: 100rpx;
		font-size: 30rpx;
	}

	.footer .footlist .sub_btn.overstep {
		background: #808080;
	}


	
</style>
